// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 获取按钮元素
  const changeColorButton = document.getElementById('changeColor');
  
  // 添加点击事件监听器
  changeColorButton.addEventListener('click', async function() {
    try {
      // 获取当前活动标签页
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      
      // 向当前标签页注入JavaScript代码以修改背景色
      await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        function: setBackgroundColorToGreen
      });
      
      // 可以添加一些用户反馈，比如改变按钮文本或颜色
      changeColorButton.textContent = '已修改!';
      changeColorButton.style.backgroundColor = '#27ae60';
      
      // 2秒后恢复按钮状态
      setTimeout(() => {
        changeColorButton.textContent = '改变颜色';
        changeColorButton.style.backgroundColor = '#27ae60';
      }, 2000);
    } catch (error) {
      console.error('修改背景色失败:', error);
      // 显示错误信息
      alert('修改背景色失败，请重试');
    }
  });
});

// 定义修改背景色的函数
function setBackgroundColorToGreen() {
  // 修改整个页面的背景色
  document.body.style.backgroundColor = '#00FF00';
  
  // 也修改html元素的背景色，以确保覆盖整个视口
  document.documentElement.style.backgroundColor = '#00FF00';
  
  // 可选：修改所有块级元素的背景色，以获得更好的效果
  const elements = document.querySelectorAll('div, section, header, footer, main, article, aside');
  elements.forEach(element => {
    // 保存原始背景色，以便后续可能的恢复操作
    element.dataset.originalBackground = element.style.backgroundColor;
    // 修改元素背景色
    element.style.backgroundColor = '#00FF00';
  });
}